<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/metrize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/polaris/polaris.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="header-content header-fixed bg-white clearfix">
    <!--  Logo -->
    <div class="logo bg-dark">
        <a href="#"><span class="logo-icon fa fa-th-large"></span> <span class="logo-text">JP</span></a>
    </div>

    <div class="top-nav">
        <ul class="list-none nav-left">
            <!-- to left menu -->
            <li class="unshow"><a class="toggle-min jp-gray jp-ripple" href="#"><i class="fa fa-bars"></i></a></li>
            <!-- dropdown settings -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown" id="dropdownMenu2"><i class="fa fa-gear"></i></a>
                <div class="dropdown-menu panel panel-default with-arrow" aria-labelledby="dropdownMenu2">
                    <div class="panel-heading"><span>Setting</span></div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <p>User setting</p>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <p>User setting</p>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option1"> 2
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option1"> 3
                            </label>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-truck"></i></a></li>
        </ul>

        <ul class="list-none nav-right pull-right">
            <!-- user info-->
            <li class="nav-profile dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown"><img src="img/t.jpg" class="img-circle img30_30" /> <span class="hidden-xs">LISA</span></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#"><i class="fa fa-dashboard"></i>Action</a></li>
                    <li><a href="#"><i class="fa fa-television"></i>Another action</a></li>
                    <li><a href="#"><i class="fa fa-file-o"></i>Something else here</a></li>
                    <li><a href="#"><i class="fa fa-table"></i>Separated link</a></li>
                </ul>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-wifi"></i></a></li>
        </ul>
    </div>

</header>
<div class="main-content">
    <!-- left nav -->
    <div class="nav-content bg-dark nav-vertical">
        <ul class="left-menu list-none">
            <li class="user-info">
                <div class="user-panel">
                    <div class="pull-left">
                        <img src="img/t.jpg" class="img-circle img45_45"/>
                    </div>
                    <div class="pull-left info">
                        <p>welcome,admin</p>
                        <a href="#"><i class="fa fa-circle"></i> online</a>
                    </div>
                </div>
                <form class="search-form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" />
                        <span class="input-group-btn">
                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </li>
            <li class="treeview ">
                <a href="main.html" class="jp-ripple"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
            </li>
            <li class="treeview active">
                <a href="#" class="jp-ripple"><i class="fa fa-television"></i><span>JP UI</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Buttons.html" ><i class="fa fa-circle ng-scope"></i><span>Buttons</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Icons.html" ><i class="fa fa-circle ng-scope"></i><span>Icons</span></a></li>
                    <li class="active jp-ripple"><a href="Typography.html"><i class="fa fa-circle ng-scope"></i><span>Typography</span></a></li>
                    <li class="jp-ripple"><a href="Lists.html"><i class="fa fa-circle ng-scope"></i><span>Lists</span></a></li>
                    <li class="jp-ripple"><a href="Forms.html"><i class="fa fa-circle ng-scope"></i><span>Forms</span></a></li>
                    <li class="jp-ripple"><a href="Components.html"><i class="fa fa-circle ng-scope"></i><span>Components</span></a></li>
                    <li class="jp-ripple"><a href="Panels.html"><i class="fa fa-circle ng-scope"></i><span>Panels</span></a></li>
                    <li class="jp-ripple"><a href="Grids.html"><i class="fa fa-circle ng-scope"></i><span>Grids</span></a></li>
                    <li class="jp-ripple"><a href="Timeline.html"><i class="fa fa-circle ng-scope"></i><span>Timeline</span></a></li>
                    <li class="jp-ripple"><a href="Tree.html"><i class="fa fa-circle ng-scope"></i><span>Tree</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-file-o"></i><span>Pages</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="SignIn.html"><i class="fa fa-circle ng-scope"></i><span>Sign In</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="SignUp.html"><i class="fa fa-circle ng-scope"></i><span>Sign Up</span></a></li>
                    <li class="jp-ripple"><a href="ForgotPassword.html"><i class="fa fa-circle ng-scope"></i><span>Forgot Password</span></a></li>
                    <li class="jp-ripple"><a href="404.html"><i class="fa fa-circle ng-scope"></i><span>404 Error</span></a></li>
                    <li class="jp-ripple"><a href="500.html"><i class="fa fa-circle ng-scope"></i><span>500 Error</span></a></li>
                    <li class="jp-ripple"><a href="Blank.html"><i class="fa fa-circle ng-scope"></i><span>Blank Page</span></a></li>
                    <li class="jp-ripple"><a href="Profile.html"><i class="fa fa-circle ng-scope"></i><span>Profile</span></a></li>
                    <li class="jp-ripple"><a href="Invoice.html"><i class="fa fa-circle ng-scope"></i><span>Invoice</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-table"></i><span>Tables</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Basetable.html"><i class="fa fa-circle ng-scope"></i><span>Base Table</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Responsivetables.html"><i class="fa fa-circle ng-scope"></i><span>Responsive Tables</span></a></li>
                    <li class="jp-ripple"><a href="DataTables.html"><i class="fa fa-circle ng-scope"></i><span>Data Tables</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-pencil"></i><span>Forms</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="FormComponents.html"><i class="fa fa-circle ng-scope"></i><span>Form Components</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="WizardForm.html"><i class="fa fa-circle ng-scope"></i><span>Wizard Form</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-bar-chart"></i><span>Charts</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="EChartsLine.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Line</span></a></li>
                    <li class="jp-ripple"><a href="EChartsBar.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Bar</span><span class="badge badge-primary ng-scope">5</span></a></li>
                    <li class="jp-ripple"><a href="EChartsPie.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Pie</span></a></li>
                    <li class="jp-ripple"><a href="EChartsScatter.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Scatter</span></a></li>
                </ul>
            </li>
            <li class="menu-divider"></li>
            <li class="nav-title">
                <span>Title</span>
            </li>
            <li class="li-sm active">
                <a href="#"><i class="fa fa-circle color-info"></i><span>JP Components</span></a>
            </li>
            <li class="li-sm treeview">
                <a href="#"><i class="fa fa-circle color-success"></i><span>JP Elements</span></a>
            </li>
        </ul>

    </div>
    <!-- content -->
    <div class="content">
        <section class="jppage">
            <!-- Headings -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Headings</h2>
            </div>
            <div class="col-md-10">
                <div class="panel panel-default">
                    <div class="panel-body">

                        <table class="table table-demo">
                            <tbody>
                                <tr>
                                    <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
                                    <td class="type-info">Semibold 36px</td>
                                </tr>
                                <tr>
                                    <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
                                    <td class="type-info">Semibold 30px</td>
                                </tr>
                                <tr>
                                    <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
                                    <td class="type-info">Semibold 24px</td>
                                </tr>
                                <tr>
                                    <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
                                    <td class="type-info">Semibold 18px</td>
                                </tr>
                                <tr>
                                    <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
                                    <td class="type-info">Semibold 14px</td>
                                </tr>
                                <tr>
                                    <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
                                    <td class="type-info">Semibold 12px</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- body -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Body</h2>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel panel-default panel-min">
                                    <div class="panel-heading">PARAGRAPH</div>
                                    <div class="panel-body">
                                        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
                                        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel panel-default panel-min">
                                    <div class="panel-heading">
                                        LEAD BODY
                                    </div>
                                    <div class="panel-body">
                                        <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
                                        <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel panel-primary panel-min">
                                    <div class="panel-heading">Marked text</div>
                                    <div class="panel-body">
                                        <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="panel panel-success panel-card">
                                    <div class="panel-heading">DELETED TEXT</div>
                                    <div class="panel-body">
                                        <p class=""><del>This line of text is meant to be treated as deleted text.</del></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-system panel-card">
                                    <div class="panel-heading">STRIKETHROUGH TEXT</div>
                                    <div class="panel-body">
                                        <p class=""><s>This line of text is meant to be treated as no longer accurate.</s></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel panel-dark panel-min">
                                    <div class="panel-heading">
                                        INSERTED TEXT
                                    </div>
                                    <div class="panel-body">
                                        <p>
                                            <ins>This line of text is meant to be treated as an addition to the document.</ins>
                                        </p>

                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="panel panel-danger panel-min">
                                    <div class="panel-heading">
                                        UNDERLINED TEXT
                                    </div>
                                    <div class="panel-body">
                                        <p>
                                            <u>This line of text will render as underlined</u>
                                        </p>

                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="panel panel-info panel-card">
                                    <div class="panel-heading">
                                        SMALL TEXT
                                    </div>
                                    <div class="panel-body">
                                        <p>
                                            <small>This line of text is meant to be treated as fine print.</small>
                                        </p>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel panel-alert">
                                    <div class="panel-heading">BOLD</div>
                                    <div class="panel-body">
                                        <p><strong>rendered as bold text</strong></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-dark">
                                    <div class="panel-heading">ITALICS</div>
                                    <div class="panel-body">
                                        <p><em>rendered as italicized text</em></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-success panel-card">
                                    <div class="panel-heading">ALIGNMENT CLASSES</div>
                                    <div class="panel-body">
                                        <p class="text-left">Left aligned text.</p>
                                        <p class="text-center">Center aligned text.</p>
                                        <p class="text-right">Right aligned text.</p>
                                        <p class="text-justify">Justified text.</p>
                                        <p class="text-nowrap">No wrap text.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel panel-default panel-card">
                                    <div class="panel-heading">TRANSFORMATION CLASSES</div>
                                    <div class="panel-body">
                                        <p class="text-lowercase">Lowercased text.</p>
                                        <p class="text-uppercase">Uppercased text.</p>
                                        <p class="text-capitalize">Capitalized text.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-default panel-card">
                                    <div class="panel-heading">ABBREVIATIONS</div>
                                    <div class="panel-body">
                                      <p>An abbreviation of the word attribute is<abbr title="attribute">attr</abbr></p>
                                        <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-default panel-card">
                                    <div class="panel-heading">ADDRESSES</div>
                                    <div class="panel-body">
                                        <p><address>
                                        <strong>Twitter, Inc.</strong><br>
                                        795 Folsom Ave, Suite 600<br>
                                        San Francisco, CA 94107<br>
                                        <abbr title="Phone">P:</abbr> (123) 456-7890
                                    </address>

                                        <address>
                                            <strong>Full Name</strong><br>
                                            <a href="mailto:#">first.last@example.com</a>
                                        </address></p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- Blockquote -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Blockquote</h2>
            </div>
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default panel-labeled">
                            <div class="panel-body">
                                <h5 class="text-center">Left</h5>
                                <blockquote>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                </blockquote>
                                <h5 class="text-center">Right</h5>
                                <blockquote class="pull-right">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit excepturi enim aliquid rerum dolore nostrum.</p>
                                    <small>Someone famous</small>
                                </blockquote>
                                <div class="panel-label">Normal</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="panel panel-default panel-labeled">
                            <div class="panel-body">
                                <h5 class="text-center">Left</h5>
                                <blockquote class="blockquote-primary">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                </blockquote>
                                <h5 class="text-center">Right</h5>
                                <blockquote class="pull-right blockquote-dark">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit excepturi enim aliquid rerum dolore nostrum.</p>
                                    <small>Someone famous</small>
                                </blockquote>
                                <div class="panel-label">Color</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Lists -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Lists</h2>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel panel-default panel-min">
                                    <div class="panel-heading">UNORDERED</div>
                                    <div class="panel-body">
                                        <ul>
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Consectetur adipiscing elit</li>
                                            <li>Integer molestie lorem at massa</li>
                                            <li>Facilisis in pretium nisl aliquet</li>
                                            <li>Nulla volutpat aliquam velit
                                                <ul>
                                                    <li>Phasellus iaculis neque</li>
                                                    <li>Purus sodales ultricies</li>
                                                    <li>Vestibulum laoreet porttitor sem</li>
                                                    <li>Ac tristique libero volutpat at</li>
                                                </ul>
                                            </li>
                                            <li>Faucibus porta lacus fringilla vel</li>
                                            <li>Aenean sit amet erat nunc</li>
                                            <li>Eget porttitor lorem</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-default panel-min">
                                    <div class="panel-heading">ORDERED</div>
                                    <div class="panel-body">
                                        <ol>
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Consectetur adipiscing elit</li>
                                            <li>Integer molestie lorem at massa</li>
                                            <li>Facilisis in pretium nisl aliquet</li>
                                            <li>Nulla volutpat aliquam velit</li>
                                            <li>Faucibus porta lacus fringilla vel</li>
                                            <li>Aenean sit amet erat nunc</li>
                                            <li>Eget porttitor lorem</li>
                                            <li>Faucibus porta lacus fringilla vel</li>
                                            <li>Aenean sit amet erat nunc</li>
                                            <li>Eget porttitor lorem</li>
                                            <li>Facilisis in pretium nisl aliquet</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-default panel-min">
                                    <div class="panel-heading">UNSTYLED
                                    </div>
                                    <div class="panel-body">
                                        <ul class="list-unstyled">
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Consectetur adipiscing elit</li>
                                            <li>Integer molestie lorem at massa</li>
                                            <li>Facilisis in pretium nisl aliquet</li>
                                            <li>Nulla volutpat aliquam velit
                                                <ul>
                                                    <li>Phasellus iaculis neque</li>
                                                    <li>Purus sodales ultricies</li>
                                                    <li>Vestibulum laoreet porttitor sem</li>
                                                    <li>Ac tristique libero volutpat at</li>
                                                </ul>
                                            </li>
                                            <li>Faucibus porta lacus fringilla vel</li>
                                            <li>Aenean sit amet erat nunc</li>
                                            <li>Eget porttitor lorem</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel panel-default panel-min">
                                    <div class="panel-heading">DESCRIPTION</div>
                                    <div class="panel-body">
                                        <dl>
                                            <dt>Description lists</dt>
                                            <dd>A description list is perfect for defining terms.</dd>
                                            <dt>Euismod</dt>
                                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                            <dt>Malesuada porta</dt>
                                            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel panel-default panel-min">
                                    <div class="panel-heading">HORIZONTAL DESCRIPTION</div>
                                    <div class="panel-body">
                                        <dl class="dl-horizontal">
                                            <dt>Description lists</dt>
                                            <dd>A description list is perfect for defining terms.</dd>
                                            <dt>Euismod</dt>
                                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                            <dt>Malesuada porta</dt>
                                            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                            <dt>Felis euismod semper eget lacinia</dt>
                                            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default panel-min">
                                    <div class="panel-heading">
                                        INLINE
                                    </div>
                                    <div class="panel-body">
                                        <ul class="list-inline">
                                            <li>Lorem ipsum</li>
                                            <li>Phasellus iaculis</li>
                                            <li>Nulla volutpat</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Dropcap & Highlight -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Dropcap & Highlight</h2>
            </div>
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default panel-min panel-labeled">
                            <div class="panel-body ">
                                <p>
                                    <span class="dropcap">D</span>escription lists
                                    A description list is perfect for defining terms.
                                    Euismod
                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                    Donec id elit non mi porta gravida at eget metus.
                                    Malesuada porta
                                    Etiam porta sem malesuada magna mollis euismod.
                                </p>
                                <p>
                                    <span class="dropcap color-primary">D</span>escription lists
                                    A description list is perfect for defining terms.
                                    Euismod
                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                    Donec id elit non mi porta gravida at eget metus.
                                    Malesuada porta
                                    Etiam porta sem malesuada magna mollis euismod.
                                </p>
                                <div class="panel-label">Dropcap</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="panel panel-default panel-min panel-labeled">
                            <div class="panel-body ">
                                <p>
                                    Description lists
                                    <span class="jp-primary highlight">A description list is perfect for defining terms.</span>
                                    Euismod
                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                    Donec id elit non mi porta gravida at eget metus.
                                    Malesuada porta
                                    Etiam porta sem malesuada magna mollis euismod.
                                </p>
                                <p>
                                    Description lists
                                    <span class="jp-dark highlight">A description list is perfect for defining terms.</span>
                                    Euismod
                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                    Donec id elit non mi porta gravida at eget metus.
                                    Malesuada porta
                                    Etiam porta sem malesuada magna mollis euismod.
                                </p>
                                <div class="panel-label">Highlight</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>






<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/treeview.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/icheck.min.js"></script>
<script src="js/jpripple.js"></script>
<script src="js/all.js"></script>
</body>
</html>